<template>
  <div class="app-container">

    <u-page title="领券设置">
      <div slot="header">
        <el-button type="primary" @click="updateData">保存</el-button>
      </div>

      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-width="120px">
        <el-tabs v-model="active">

          <el-tab-pane label="基础设置" name="first">
            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>消费领劵</h4>
                  <span>在活动期间内满足领取的用户，每个用户ID活动每天限1次</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.couponEnabled" class="panel-switch" />
                </div>
              </div>

              <div v-if="dataForm.couponEnabled" style="margin-top: 20px;">
                <el-form-item label="停车券(23点前)" prop="templateId_0">
                  <ues-coupon v-model="dataForm.templateId_0" valid></ues-coupon>
                </el-form-item>
                <el-form-item label="停车券(23点后)" prop="templateId_1">
                  <ues-coupon v-model="dataForm.templateId_1" valid></ues-coupon>
                </el-form-item>

                <el-form-item label="领取条件" prop="threshold">
                  <el-input v-model="dataForm.threshold" placeholder="请输入" clearable style="width: 300px">
                    <template slot="prepend">累计消费金额满</template>
                    <template slot="append">元</template>
                  </el-input>
                  <span>  领取  </span>
                  <el-input v-model="dataForm.couponAmount" placeholder="请输入" clearable style="width: 180px">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="黑名单" prop="blacklist">
                  <blacklist v-model="dataForm.blacklist" style="width: 100%" />
                </el-form-item>

                <el-form-item label="拍摄小票" prop="takeEnabled">
                  <el-switch v-model="dataForm.takeEnabled" class="panel-switch" />
                </el-form-item>
              </div>
            </el-card>
          </el-tab-pane>

<!--          <el-tab-pane label="自收银餐厅管理" name="fifth">-->
<!--            <el-form-item label="自收银餐厅管理" prop="depts">-->
<!--              <restaurant v-model="dataForm.depts" />-->
<!--            </el-form-item>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="规则说明" name="second">
            <el-form-item label="规则说明" prop="policy">
              <el-input v-model="dataForm.policy" type="textarea" placeholder="规则说明" clearable rows="5" />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="指令设置" name="third">
            <el-form-item label="指令" prop="command">
              <el-input v-model="dataForm.command" type="textarea" placeholder="AI指令" clearable rows="5" />
            </el-form-item>
            <el-form-item label="最低可靠" prop="dbl">
              <el-input v-model="dataForm.dbl" placeholder="最低可靠" clearable style="width: 400px" />
            </el-form-item>
            <el-form-item label="替换文本" prop="word">
              <el-input v-model="dataForm.word" placeholder="模糊文本替换值" clearable style="width: 400px" />
            </el-form-item>
          </el-tab-pane>

        </el-tabs>
      </el-form>
    </u-page>

  </div>
</template>
<script>

import blacklist from '@/components/module/blacklist'
import uesCoupon from '@/components/coupon/uesCoupon'
import restaurant from '../components/restaurant'

export default {
  components: { blacklist, uesCoupon, restaurant },
  data() {
    return {
      api: this.$u.api.PluginsParkcouponConfig,
      active: 'first',
      dataForm: {
        limitDayVip: 0
      },
      rules: {
        templateId_0: [
          { required: true, message: '此项必填', trigger: 'blur' }
        ],
        templateId_1: [
          { required: true, message: '此项必填', trigger: 'blur' }
        ],
        threshold: [
          { required: true, message: '此项必填', trigger: 'blur' }
        ]
      },
      list: []
    }
  },
  created() {
    this.getLoad()
  },
  methods: {
    // 初始化数据
    getLoad() {
      this.api.fetch().then(res => {
        this.dataForm = res.data
      })
    },
    // 提交编辑数据
    updateData() {
      this.dataForm.threshold = Number(this.dataForm.threshold)
      const self = this
      this.$confirm('确认更改领券设置', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            self.api.update(self.dataForm).then(() => {
              self.getLoad()
              self.$u.msg('保存成功')
            })
          }
        })
      }).catch(() => {
      })
    }
  }

}
</script>

<style lang="scss" scoped>

.panel{
  margin-bottom: 20px;
  .panel-body{
    display:flex;
    justify-content:space-between;

    .panel-header{
      display: flex;
      flex-flow: column;
      color: #999;
      font-size: 12px;

      h4{
        font-size: 14px;
        color: #000;
      }
    }

    .panel-switch{
      margin-top: 20px;
    }
  }
}

</style>
